Skip to content

Multi-Step Signup

In this challenge, you'll build a multi-step signup form:

Specifically, we'll be focusing on the front-end parts of this challenge: usability, state management, and component architecture. We won't worry about actually submitting the data anywhere.

You won't be building this from scratch; most of the markup and styles have been provided (though you will need to make some tweaks). Your primary job will be to make it interactive, and manage the state.

Difficulty

This is a moderately difficult challenge, with lots of little gotchas. That said, I believe we cover everything you'd need to know in the course.

Unlike the previous challenges, you may need to tweak the CSS in this one.

Rules

  • No additional third-party packages are allowed.
    • the clsx utility package has been included to make it easier to apply multiple CSS classes to an element.
  • Feel free to google anything you'd like.

Playground

Acceptance Criteria:

  • Only 1 step of the form should be shown at a time.
  • In the header, there's a list of steps. Users should be able to click each item to jump to the appropriate step.
  • The "Continue" button at the bottom should take the user to the next step, if they've successfully completed the current step.
  • When the user is on the final step, the "Continue" button should instead read "Submit". Clicking the button should trigger a window.alert, as a placeholder for sending the data to our backend.
  • The "Reset" button should clear all of the form data, and take the user back to Step 1.
  • The final result should work for keyboard users, as well as folks who use a screen reader.
  • You should give some thought to the overall component architecture. Feel free to extract new components as you see fit, or to refactor any of the provided code. Pretend you're working on this on-the-job; what would you need to do to get this code production-ready?

Code Playground

import React from 'react';
import clsx from 'clsx';

import StepList from './StepList';
import styles from './SignupForm.module.css';

function SignupForm() {
return (
<div className={styles.wrapper}>
<header className={styles.header}>
<StepList />
</header>

<section className={styles.step}>
<h2>Personal Information</h2>

<label>Preferred name:</label>
<input type="text" />

<label>Email address:</label>
<input type="email" />
</section>

<section className={styles.step}>
<h2>Select Plan</h2>

<ul className={styles.planList}>
<li>
<input type="radio" name="plan" value="trial" />
<label>
<span className={styles.planTitle}>
Free Trial
</span>
<p>
Start a 2-week free trial, to test the
application out and see what you think.
</p>
</label>
</li>
<li>
<input
type="radio"
name="plan"
value="advanced"
/>
<label>
<span className={styles.planTitle}>
Advanced Package
</span>
<p>
Take advantage of the full suite of tools.
For students and professionals.
</p>
</label>
</li>
<li>
<input type="radio" name="plan" value="team" />
<label>
<span className={styles.planTitle}>
Team Package
</span>

My attempt